<script setup>
import { ref } from 'vue'
import { Select, CloseBold } from '@element-plus/icons-vue'
const isLoggedIn = ref(false)
const loginDrawer = ref(false)
const activeTab = ref('login')
const loginForm = ref({ username: '', password: '' })
const yesValue = ref(false) //确认许可
import loginSrc from '@/assets/logo.png'
const registerForm = ref({
  username: '',
  password: '',
  confirmPassword: '',
  role: ''
})

const handleClick = (tab, event) => {
  console.log(tab, event)
}

const submitForm = () => {
  if (activeTab.value === 'login') {
    console.log('Login:', loginForm.value)
  } else {
    console.log('Register:', registerForm.value)
  }
  loginDrawer.value = false
}

const cancelClick = () => {
  loginDrawer.value = false
}
</script>

<template>
  <el-menu
    router
    :default-active="this.$route.path"
    class="el-menu-demo"
    mode="horizontal"
    :ellipsis="false"
  >
    <el-menu-item index="/" class="no-underline">
      <img style="width: 50px" src="@/assets/logo.png" />
      <p>AC校园招聘</p>
    </el-menu-item>
    <div class="flex-grow" />
    <el-menu-item index="/">首页 </el-menu-item>
    <el-menu-item index="/workhome">招聘大厅</el-menu-item>
    <el-menu-item index="jobhome">求职大厅</el-menu-item>
    <div class="flex-grow" />
    <el-sub-menu v-if="isLoggedIn" index="/user">
      <template #title>
        <img style="width: 50px" src="@/assets/avatar.png" />
        <span>用户名</span>
      </template>
      <el-menu-item index="/user">个人中心</el-menu-item>
      <el-menu-item @click="logout()">退出登录</el-menu-item>
    </el-sub-menu>
    <el-menu-item v-else @click="login()">
      <el-button
        size="large"
        type="primary"
        color="#626aef"
        @click="loginDrawer = true"
        >登录
      </el-button>
    </el-menu-item>
  </el-menu>
  <div class="h-6" />
  <el-drawer v-model="loginDrawer" :direction="direction">
    <el-row>
      <el-image
        style="width: 100px; height: 100px"
        :src="loginSrc"
        :fit="none"
      ></el-image>
      <el-text style="font-size: 50px" type="success">AC校园招聘</el-text>
    </el-row>
    <el-row style="margin-top: 50px"></el-row>
    <el-tabs v-model="activeTab" @tab-click="handleClick" type="border-card">
      <el-tab-pane label="登录" name="login">
        <el-form ref="loginFormRef" :model="loginForm" label-width="80px">
          <el-form-item label="用户名">
            <el-input v-model="loginForm.username"></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input
              type="password"
              v-model="loginForm.password"
              show-password
            ></el-input>
          </el-form-item>
        </el-form>
        <el-row justify="center">
          <el-button @click="cancelClick">取消</el-button>
          <el-button type="primary" @click="submitForm">登录</el-button>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="注册" name="register">
        <el-form :model="registerForm" label-width="80px" :label-position="top">
          <el-form-item prop="username" label="用户名">
            <el-input v-model="registerForm.username"></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input
              type="password"
              v-model="registerForm.password"
              show-password
            ></el-input>
          </el-form-item>
          <el-form-item label="确认密码">
            <el-input
              type="password"
              v-model="registerForm.confirmPassword"
              show-password
            ></el-input>
          </el-form-item>
          <el-form-item label="角色">
            <el-select v-model="registerForm.role" placeholder="请选择角色">
              <el-option label="求职者" value="jobseeker"></el-option>
              <el-option label="招聘者" value="recruiter"></el-option>
            </el-select>
          </el-form-item>
          <el-row justify="center"
            ><el-button @click="cancelClick">取消</el-button>
            <el-button type="primary" @click="submitForm">注册 </el-button>
          </el-row>
        </el-form>
      </el-tab-pane>
    </el-tabs>
    <el-row justify="center" style="margin-top;: 50%">
      <el-switch
        v-model="yesValue"
        :active-action-icon="Select"
        :inactive-action-icon="CloseBold"
      />
      <el-text> 您已经仔细阅读并同意</el-text>
      <el-text>《隐私政策》 与 《用户服务协议》</el-text>
    </el-row>
  </el-drawer>
</template>

<style scoped>
.flex-grow {
  flex-grow: 1;
}

/* .login-button {
  font-size: 20px !important;
  font-family: Arial, sans-serif !important;
} */
</style>
